
/**
 * 非受控组件表单处理
 * 定义: 非受控组件就是通过手动操作dom的方式获取文本框的值，
 *       文本框的状态不受react组件的state中的状态控制，直接通过原生dom获取输入框的值
 * 步骤：
 * 1.导入createRef函数
 * 2.调用createRef函数 创建一个ref对象 存储到名为msgRef（可自定义）的实例属性中
 * 3.为input添加ref属性 值为mgsRef
 * 4.在按钮的事件处理程序中，通过msgRef.current即可拿到input对应的dom元素，
 *   而其中msgRef.current.value拿到的就是文本框的值
 * 
 */

import React, { createRef } from "react"
class InputComponent extends React.Component {
  // 这个实例属性是可以自定义的 语义化即可
  msgRef = createRef()

  getValue = () => {
    // 通过msgRef获取input的value值
    console.log(this.msgRef.current.value, 'value')
  }
  render () {
    return (
      <div>
        <input type="text" ref={this.msgRef} />

        <button onClick={this.getValue}>点击获取输入框的值</button>
      </div>
    )
  }
}

function App () {
  return (
    <div className="App">
      <InputComponent></InputComponent>
    </div>
  )
}

export default App
